<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fullscreen Video with Animated Text</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background-color: #000; /* Set background color to black */
        }

        #video-container {
            position: relative;
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #custom-text {
            position: absolute;
            top: 25%; /* Adjust the top position as needed */
            text-align: center;
            color: #00ffcc; /* Set text color to a light blue-green color */
            font-size: 36px;
            font-weight: bold;
            width: 100%;
            white-space: nowrap;
            opacity: 0;
        }

        #custom-text span {
            display: inline-block;
            opacity: 0;
            animation: fadeInUp 20s ease-out forwards;
        }

        @keyframes fadeInUp {
            to {
                opacity: 1;
            }
        }

        video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>

<div id="video-container">
    <video id="myVideo" autoplay preload="auto">
        <!-- Replace 'your-video.mp4' with the path to your video file -->
        <source src="002.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <div id="custom-text">
        <span>祝</span>
        <span>方</span>
        <span>部</span>
        <span>长</span>
        <span>天</span>
        <span>天</span>
        <span>开</span>
        <span>心</span>
        <span> </span>
        <span>平</span>
        <span>安</span>
        <span>喜</span>
        <span>乐</span>
        <span>!</span>
    </div>
</div>

<script>
    const video = document.getElementById('myVideo');
    const customText = document.getElementById('custom-text');
    const spans = customText.querySelectorAll('span');

    // Add delay to each span element
    spans.forEach((span, index) => {
        span.style.animationDelay = `${index * 0.2}s`;
    });

    // Show the video element once it's ready
    video.addEventListener('canplaythrough', function () {
        video.style.display = 'block';

        // Show the custom text
        customText.style.opacity = '1';
    });
</script>

</body>
</html>
